<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* .w400 {
      width: 400px;
    } */
    .img {
      width: 100%;
    }
    .btn {
      display: block;
      width: 100%;
    }
  </style>
  <body>
    <div id="app">
      <!-- 
    输入框  el-input 
               v-model值的双向绑定
               prefix-icon 输入框前面图标
               show-password  是否显示密码模式
                  boolean:true显示*密码模式  false不显示密码*号模式
   栅栏布局   一共24列
       el-row  行
          el-col   span占多少列   :span="5"
  多选框
      el-checkbox    v-model:双向绑定
               v-model初始值为boolean或者字符串,它选中后它的值会变成true与false
               v-model初始值为数组,它选中某项后,是在该数组添加(删除)该项的值
    文字链接
    <el-link type="primary">主要链接</el-link>
     按钮
        el-button   type="primary"  type决定色调 

               



         -->

      <el-input
        placeholder="请输入手机号"
        prefix-icon="el-icon-user"
        v-model="input2"
      >
      </el-input>
      <el-input
        v-model="password"
        placeholder="请输入密码"
        prefix-icon="el-icon-lock"
        show-password
      ></el-input>
      <div class="w400">
        <el-row>
          <el-col :span="18">
            <el-input
              placeholder="请输入验证码"
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <img class="img" src="./code.jpg" alt="" />
          </el-col>
        </el-row>
      </div>
      <p>{{checked}}</p>
      <el-checkbox v-model="checked" label="湖北">湖北省</el-checkbox>
      <el-checkbox v-model="checked" label="湖南">湖南省</el-checkbox>
      <p>{{checkValue}}</p>
      <label>
        <input type="checkbox" value="hb" v-model="checkValue" />湖北省
      </label>
      <label>
        <input type="checkbox" value="gd" v-model="checkValue" />广东省
      </label>
      <!-- 用户协议 -->

      <el-checkbox
        >我已阅读并同意<el-link type="primary">用户协议</el-link></el-checkbox
      >
      <el-button type="primary" class="btn">登陆</el-button>
      <br />
      <el-button type="primary" class="btn">注册</el-button>
    </div>

    <script src="./vue.js"></script>
    <!-- 引入 element-ui   注意不要放到vue.js上面-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./ele.css" />
    <!-- 引入组件库 -->
    <script src="./index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          input2: "",
          password: "",
          checked: "",
          checkValue: [],
        },
      });
    </script>
  </body>
</html>
